<template>
	<!-- 没有token不显示页面，并跳转去登录页面 -->
	<view v-if="token">
		<!-- 青色背景 -->
		<view class="my-bg"></view>
		<view class="space"></view>
		<!-- <uni-icons custom-prefix="iconfont" type="icon-shezhi" size="30"></uni-icons> -->
		<!-- 个人概览 -->
		<view class="user-detail pd">
			<view class="hd">
				<view class="hd-l">
					<view class="user-img">
						<image :src="userInfo.avatar ? userInfo.avatar : '/static/page1.jpg'" mode="widthFix"></image>
					</view>
					<view class="person">
						<view class="nickname">{{ userInfo.nickName ? userInfo.nickName : '用户名' }}</view>
						<uni-icons v-if="userInfo.gender === '男'" custom-prefix="iconfont" type="icon-icon-test" size="20" class="sex-icon" color="skyblue"></uni-icons>
						<uni-icons v-else custom-prefix="iconfont" type="icon-icon-test" size="20" class="sex-icon" color="indianred"></uni-icons>
					</view>
				</view>
				<navigator class="hd-r" url="/subpkg/submy/person/person">个人信息&nbsp;&gt;</navigator>
			</view>
			<view class="bd">
				<view class="item">
					<text>0</text>
					<text>面试通知</text>
				</view>
				<view class="item">
					<text>0</text>
					<text>浏览历史</text>
				</view>
				<view class="item">
					<text>{{ deliverCount }}</text>
					<text>我投递过的</text>
				</view>
			</view>
		</view>
		<!-- 服务区 -->
		<view class="service">
			<!-- 个人服务 -->
			<view class="service-item pd">
				<view class="hd">个人服务</view>
				<view class="bd">
					<navigator open-type="navigate" :url="item.ToPages" class="bd-item" v-for="(item, index) in perServiceList" :key="index">
						<view class="iconBox">
							<uni-icons custom-prefix="iconfont" :type="item.iconType" size="24"></uni-icons>
						</view>
						<text>{{ item.text }}</text>
					</navigator>
				</view>
			</view>
			<!-- 创业服务 -->
			<view class="service-item pd">
				<view class="hd">创业服务</view>
				<view class="bd">
					<navigator open-type="navigate" :url="item.ToPages" class="bd-item" v-for="(item, index) in newworkList" :key="index">
						<view class="iconBox">
							<uni-icons custom-prefix="iconfont" :type="item.iconType" size="24"></uni-icons>
						</view>
						<text>{{ item.text }}</text>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 其余 -->
		<view class="other">
			<navigator class="other-item" open-type="navigate" url="/subpkg/communicate/service">
				<uni-icons custom-prefix="iconfont" type="icon-wodekefu" size="26"></uni-icons>
				<text>在线客服</text>
			</navigator>
			<view class="other-item">
				<uni-icons custom-prefix="iconfont" type="icon-dakaixinxi" size="26"></uni-icons>
				<text>浏览记录</text>
			</view>
			<navigator class="other-item" url="/subpkg/submy/install" open-type="navigate">
				<uni-icons custom-prefix="iconfont" type="icon-shezhi" size="26"></uni-icons>
				<text>设置</text>
			</navigator>
		</view>
		<!-- 信箱 -->
		<view class="xinxiang">
			<uni-icons custom-prefix="iconfont" type="icon-youxiang" size="28" color="white"></uni-icons>
		</view>
		<popup></popup>
		<tabbar :tab="4"></tabbar>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { getUserInfo } from '@/http/api.js';

export default {
	data() {
		return {
			perServiceList: [
				{
					iconType: 'icon-mianxing-shuben',
					text: '我的简历',
					ToPages: '/subpkg/myResume/manageMyResume'
				},
				{
					iconType: 'icon-songhuo',
					text: '我的投递',
					ToPages: '/subpkg/submy/myService/myDeliver'
				},
				{
					iconType: 'icon-aixin',
					text: '收藏的职位',
					ToPages: '/subpkg/submy/myService/myCollect'
				},
				{
					iconType: 'icon-xinxi',
					text: '我的面试',
					ToPages: '/subpkg/submy/myService/myInterview'
				},
				{
					iconType: 'icon-qizi',
					text: '我的活动',
					ToPages: '/subpkg/recruit/recruit'
				}
			],
			newworkList: [
				{
					iconType: 'icon-tuandui',
					text: '我的团队',
					ToPages: '/subpkg/recruit/recruit'
				},
				{
					iconType: 'icon-xiangmu',
					text: '我的项目',
					ToPages: '/subpkg/recruit/recruit'
				},
				{
					iconType: 'icon-gantanhao-yuankuang',
					text: '项目状态',
					ToPages: '/subpkg/recruit/recruit'
				}
			]
		};
	},
	onShow() {
		// console.log(this.userInfo);
		// 无token，提示用户，并跳转页面
		if (!this.token) {
			uni.$showMsg('请登录！', 1500);
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/my/my'
				});
			}, 1500);
		}

		this.getUser();
	},
	computed: {
		// vuex中的token
		...mapState(['token', 'userInfo']),

		// 我投递过的---动态获取
		deliverCount() {
			var parttime = JSON.parse(uni.getStorageSync('deliverParttime') || '[]');
			var recruit = JSON.parse(uni.getStorageSync('deliverRecruit') || '[]');
			return parttime.length + recruit.length;
		}
	},

	methods: {
		...mapMutations(['updateUserInfo']),

		// 发请求获取用户信息
		async getUser() {
			try {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				// 获取用户信息
				const { data: res } = await getUserInfo(uni.getStorageSync('uid'));
				console.log(res);
				// 利用正则全局匹配，解决图片大小
				// res.studentVO.personDesc = res.studentVO.personDesc.replace(/<img/gi, '<img style="width:400rpx;height:400rpx;"');
				// 存储用户信息到vuex
				this.updateUserInfo(res.studentVO);

				uni.hideLoading();
			} catch (err) {
				uni.$showMsg('暂时无法发出请求', 2000);
				this.updateUserInfo({
					id: '',
					nickName: 'cw061532',
					personDesc: '',
					phone: '181****2263',
					school: '广东科贸职业学院',
					birthday: '',
					gender: '男',
					speciality: '软件技术',
					position: 'java开发',
					address: '广州',
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					education: '大专',
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.pd {
	margin: 0 50rpx;
	border-radius: 24rpx;
	box-shadow: 0px 0px 12rpx #ccc;
	background-color: white;
}
.my-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -22;
	width: 100%;
	height: 400rpx;
	background-color: #00dcb6;
	border-radius: 0 0 80rpx 80rpx;
	padding-top: 140rpx;
}
.space {
	padding-bottom: 140rpx;
}
.user-detail {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 36rpx 50rpx;
	.hd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.hd-l {
			width: 80%;
			display: flex;
			align-items: center;
			.user-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
				image {
					width: 100%;
					height: 100% !important;
				}
			}

			.person {
				flex: 1;
				display: flex;
				align-items: center;
				.nickname {
					font-size: 40rpx;
					font-weight: 600;
					margin: 0 10rpx 0 30rpx;
					word-wrap: break-word;
					word-break: break-all;
					overflow: hidden;
				}
			}
		}
		.hd-r {
			color: #b3b2b2;
			font-size: 24rpx;
			margin-right: -20rpx;
		}
	}
	.bd {
		display: flex;
		justify-content: space-around;
		margin-top: 50rpx;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			text:nth-child(1) {
				font-size: 46rpx;
				margin-bottom: 10rpx;
			}
			text:nth-child(2) {
				font-size: 26rpx;
				color: #b3b2b2;
			}
		}
	}
}

.service {
	.service-item {
		.hd {
			font-size: 30rpx;
			padding: 30rpx 0 30rpx 34rpx;
			border-bottom: 2rpx solid #efefef;
		}
		.bd {
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx 10rpx;
			font-size: 28rpx;
			.bd-item {
				// 一行4个
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				&:nth-child(4n) {
					margin-bottom: 30rpx;
				}
				.iconBox {
					border: 2rpx solid #bbbbbb;
					background-color: #efefef;
					border-radius: 50%;
					padding: 16rpx;
					margin-bottom: 16rpx;
					display: flex;
					align-items: center;
				}
			}
		}
		&:nth-child(1) {
			margin-top: 30rpx;
			margin-bottom: 70rpx;
		}
	}
}

.other {
	margin: 40rpx 50rpx;
	padding-bottom: 200rpx;
	.other-item {
		padding: 30rpx 0;
		font-size: 32rpx;
		border-bottom: 2rpx solid #efefef;
		text {
			margin-left: 20rpx;
		}
	}
}

.xinxiang {
	position: absolute;
	right: 68rpx;
	top: 34rpx;
	/deep/ .uni-icons {
		font-weight: 700 !important;
	}
}
</style>
